<template>

  <v-card>
    <v-card-title>
      <v-btn color="primary" @click="addGoods">新增商品</v-btn>

      <!--搜索框，与search属性关联-->
      <v-spacer/>
      <!--上下架-->
      <v-flex xs4>
        状态
       <v-btn-toggle v-model="filter.saleable">
         <v-btn flat >全部</v-btn>
         <v-btn flat :value="true">上架</v-btn>
         <v-btn flat :value="false">下架</v-btn>
       </v-btn-toggle>
      </v-flex>
      <v-text-field label="输入关键字搜索" v-model.lazy="filter.search" append-icon="search" hide-details/>
    </v-card-title>
    <v-divider/>
    <v-data-table
      :headers="headers"
      :items="goodsList"
      :search="filter.search"
      :pagination.sync="pagination"
      :total-items="totalGoods"
      :loading="loading"
      class="elevation-1">
      <template slot="items" slot-scope="props">
        <td>{{props.item.id}}</td>
        <td class="text-xs-center">{{props.item.title}}</td>
        <td class="text-xs-center">{{props.item.cname}}</td>
        <td class="text-xs-center">{{props.item.bname}}</td>
        <td class="justify-center layout">
          <v-btn color="info" @click="editGoods(props.item)">编辑</v-btn>
          <v-btn color="warning">删除</v-btn>
          <v-btn>下架</v-btn>
        </td>
      </template>
    </v-data-table>

    <!--弹出的对话框-->
    <v-dialog max-width="800" max-height="500" v-model="show" persistent scrollable>
      <v-card>
        <!--对话框的标题-->
        <v-toolbar dense dark color="primary">
          <v-toolbar-title>{{isEdit ? '修改':'新增'}}商品</v-toolbar-title>
          <v-spacer/>
          <!--关闭窗口的按钮-->
          <v-btn icon @click="closeWindow"><v-icon>close</v-icon></v-btn>
        </v-toolbar>
        <!--对话框的内容，表单-->
        <v-card-text class="px-3">
          <my-goods-form :oldGoods="oldGoods" :step="step"/>
        </v-card-text>

        <!--底部按钮，用来操作步骤线的-->
        <v-card-actions class="elevation-10">
          <v-flex class="xs3 mx-auto">
            <v-btn @click="step=step>1?--step:step"  color="info" :disabled="step===1">上一步</v-btn>
            <v-btn @click="step=step<4?++step:step"  color="info" :disabled="step===4">下一步</v-btn>
          </v-flex>
        </v-card-actions>

      </v-card>
    </v-dialog>


  </v-card>

</template>

<script>
    import MyGoodsForm from "./MyGoodsForm";
    export default {
        name: "MyGoods",
      components: {MyGoodsForm},
      data(){
          return{
            // search:"",//搜索过滤字段
            totalGoods:0,//总条数
            goodsList:[],//当前页品牌数据
            loading: true,//是否在加载中
            pagination:{},//分页信息
            headers:[
              {text:'id',align:'center',value:'id'},
              {text:'标题',align:'center',value:'title',sortable: false},
              {text:'商品分类',align:'center',value:'cname',sortable: false},
              {text:'品牌',align:'center',value:'bname', sortable: false},
              {text:'操作',align:'center',sortable:false},
            ],
            show:false,//控制对话框的显示
            oldGoods:{},//即将被修改的商品信息
            isEdit:false,//是否是编辑
            step:1,//步骤默认为1
            filter:{//记录按钮中的值
              saleable:true,//是否上架
              search:"",//搜索过滤字段
            },

          }
      },
      mounted() {//渲染后执行
          this.getDataFromServer();
      },
      watch:{
          pagination:{//监视pagination的属性变化
            deep:true,//深度监控
            handler(){
              //变化后的回调函数
              this.getDataFromServer();
            }

          },
        filter:{//上下架的按钮和搜索监控
            deep:true,
            handler(){
              this.getDataFromServer();
            }
        }
      },
      methods:{
          aaa(){
            alert(this.step);
          },

          getDataFromServer(){//从服务中加载的方法
            //发起请求
            this.$http.get("item/spu/page",{
              params:{
                key:this.filter.search,//搜索条件
                page:this.pagination.page,//当前页
                rows:this.pagination.rowsPerPage,//每页大小
                sortBy:this.pagination.sortBy,//排序字段
                desc: this.pagination.description,//是否降序
                saleable:this.filter.saleable,//是否上架
              }
            }).then(({data})=>{
              this.goodsList=data.items;
              this.totalGoods=data.total;
              this.loading=false;//加载完毕
            })
          },
        addGoods(){
            //修改标记
          this.isEdit=false;
          //控制弹窗可见
          this.show=true;
          //吧oldBrand变为null
          this.oldGoods=null;
        },
        editGoods(oldGoods){
            //修改标记
            this.isEdit=true;
            //控制弹窗可见
            this.show=true;
            //获取要编辑的brand
            this.oldGoods=oldGoods;
        },
        closeWindow(){
            //重新加载数据
            this.getDataFromServer();
            //关闭窗口
            this.show=false;
        }
      },
    }
</script>

<style scoped>

</style>
